<template>
  <section v-if="data && data.id" class="post-item clearfix">
    <div class="post-rank">
      <div class="voted">
        <span>{{data.recommended}}</span>
        <span>赞</span>
      </div>
      <div class="answered" :class="{danger: data.replied === 0}">
        <span>{{data.replied}}</span>
        <span>回答</span>
      </div>
      <div class="viewed">
        <span>{{data.recommended}}</span>
        <span>浏览</span>
      </div>
    </div>
    <div class="post-item-body">
      <p>{{data.createdBy.name}}  · <span>发布于 </span><date-span :value="data.createdAt"></date-span>  · <grade-span :index="data.grade"></grade-span>  · <subject-span :index="data.subject"></subject-span>
      <h2>
        <router-link class="title" :to="{name: 'question-detail', params: {id: data.id}}">{{data.title}}</router-link>
        <i-tag class="item-tag" v-for="(tag, index) in data.tags" :key="'post_' + data.id + '_' + index">{{tag}}</i-tag>
      </h2>
      <p>{{description}}</p>
    </div>
  </section>
</template>

<script>
import DateSpan from '../data-span/Date'
import SubjectSpan from '../data-span/Subject'
import GradeSpan from '../data-span/Grade'
export default {
  components: {
    DateSpan,
    SubjectSpan,
    GradeSpan
  },
  props: ['data'],
  computed: {
    description() {
      return (
        this.data &&
        this.data.description &&
        this.data.description.replace(/<[^>]+>/g, '').substr(0, 100)
      )
    }
  }
}
</script>

<style lang="less" scoped>
.post-item {
  padding: 10px 15px;

  background: white;
  .post-item-body {
    padding: 0px 10px;
    overflow: auto;
  }
  .post-rank {
    float: left;
    > div {
      display: inline-block;
      color: #777;
      padding: 3px 8px;
      @media (max-width: 768px) {
        &.voted,
        &.viewed {
          display: none;
        }
      }
      > span {
        display: block;
        text-align: center;
      }
      &.answered {
        background: #009a61;
        color: white;
      }
      &.danger {
        background: #ad3a37;
        color: white;
      }
    }
  }
}
.title {
  font-size: 14px;
  font-weight: normal;
  color: #333;
  &:hover {
    text-decoration: underline !important;
  }
}
</style>
